<template>
  <div>
    <page-main>
      <TableHeader title="用户列表">
        <template #option>
          <span class="option">
            <el-divider direction="vertical" />
            <el-input v-model="searchParams" placeholder="请输入关键词搜索" class="input-with-select">
              <el-button slot="append" icon="el-icon-search" @click="getList" />
            </el-input>
          </span>
        </template>
        <el-button type="primary" @click="openAddDialog"><i class="el-icon-plus el-icon--left" />新增</el-button>
      </TableHeader>
      <el-table v-loading="isTableLoading" :data="dataList" border stripe highlight-current-row>
        <template v-for="item of columns">
          <el-table-column :key="item.prop" :prop="item.prop" :label="item.label" :width="item.width" />
        </template>
        <el-table-column fixed="right" label="操作" width="95">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleClick('preview', scope.row)">查看</el-button>
            <el-button type="text" size="small" @click="handleClick('edit', scope.row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <Page :current-page="currentPage" :total="total" :page-size="pageSize" @change-current-page="changeCurrentPage" @change-page-size="changePageSize" />
    </page-main>

    <ListDialog :data="form" :show="showDialog" :readonly="readonly" @closeDialog="closeDialog" @afterSubmit="onDialogSubmit" />
    <AddDialog :show="showAddDialog" @closeDialog="closeAddDialog" @afterSubmit="onAddDialogSubmit" />
  </div>
</template>

<script>
import page from '@/mixins/page'
import dialog from '@/mixins/dialog'
import { userManagement } from '@/api/userManagement'
import ListDialog from './components/listDialog.vue'
import AddDialog from './components/addDialog.vue'

export default {
  components: { ListDialog, AddDialog },
  mixins: [page, dialog],
  data() {
    return {
      showAddDialog: false,
      columns: [
        {
          prop: 'id',
          label: 'id',
          width: '80px'
        },
        {
          prop: 'name',
          label: '用户名'
        },
        {
          prop: 'ident',
          label: '身份'
        }
      ],
      dataList: [],
      searchParams: '',
      form: {},
      readonly: false,
      isTableLoading: false
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    async getList() {
      const params = {
        current: this.currentPage,
        size: this.pageSize,
        marker: this.searchParams,
        sessionId: this.$store.state.user.session_id
      }
      this.isTableLoading = true
      const result = await userManagement.list(params)
      this.dataList = result.data.users
      this.total = result.data.total * 1
      this.isTableLoading = false
    },
    handleClick(action, data) {
      this.form = data
      if (action === 'preview') {
        this.readonly = true
        this.openDialog()
      }
      if (action === 'edit') {
        this.readonly = false
        this.openDialog()
      }
      if (action === 'delete') {
        this.onDeleteRow()
      }
    },
    onDialogSubmit() {
      this.getList()
      this.closeDialog()
    },
    openAddDialog() {
      this.showAddDialog = true
    },
    closeAddDialog() {
      this.showAddDialog = false
    },
    onAddDialogSubmit() {
      this.getList()
      this.closeAddDialog()
    }
  }
}
</script>
<style lang="scss" scoped>
.option {
    display: flex;
    align-items: center;
    font-size: 20px;
}
.option ::v-deep {
    .el-divider--vertical {
        margin: 0 16px;
    }
}
</style>
